<template>
	<view class="logo-v">
		<view class="login-bg">
			<image src="/static/login-bg.png" mode="widthFix"></image>
		</view>
		<view class="logo-hd u-flex-col">
			<view class="logoImg">
				<image :src="appIcon" mode="widthFix"></image>
			</view>
			<view class="loginSwitch u-flex-col">
				<view class="loginInputBox u-flex-col">
					<u-form :model="formData" :rules="rules" ref="dataForm" :errorType="['toast']" label-position="left"
						label-width="150" label-align="left">
						<u-form-item prop="account">
							<u-input v-model="formData.account" placeholder="请输入帐号" @focus="onFocus" @blur="onBlur">
							</u-input>
						</u-form-item>
						<u-form-item prop="password">
							<u-input v-model="formData.password" type="password" placeholder="请输入密码"></u-input>
						</u-form-item>
						<u-form-item prop="canLoginCompanyLabel">
							<u-input @click="companyShow = true" v-model="formData.canLoginCompanyLabel" type="select"
								placeholder="请选择公司"></u-input>
						</u-form-item>
						<u-form-item>
							<view class="u-flex code-box">
								<u-checkbox v-model="isCode" shape="circle"></u-checkbox>
								已阅读并同意<a style=" text-decoration: none; "
									href="https://m.yinmaisoft.com/userAgreement.html">服务协议</a>和
								<a style=" text-decoration: none;"
									href="https://m.yinmaisoft.com/privacyPolicy.html">隐私政策</a>
							</view>
						</u-form-item>
					</u-form>
					<view class="loginBtnBox u-m-t-64">
						<u-button @click="login" type="primary" :loading="loading">{{ loading ? "登录中...":"登录"}}
						</u-button>
					</view>
					<view class="loginBtnBox u-m-t-64">
						<u-button @click="option1=true" type="warning">
							选择公司名
						</u-button>
					</view>
				</view>
			</view>
		</view>
		<!-- Copyright © 2022 广东启邦软件技术有限公司 -->
		<view class="copyright">{{copyright}}</view>
		<!-- 选择公司 -->
		<u-modal v-model="option1" :show-confirm-button="false" :async-close="true" ref="uModal" title="选择公司">
			<u-tag v-for="(item,index) in optionList" :key="index" :text="item.companyName" @click="tagClick(item)"
				style="margin: 15rpx;" />
		</u-modal>
		<!-- 选择数据库 -->
		<u-select v-model="companyShow" @confirm='selectConfirm' :list="companyColumns" mode="single-column"
			value-name='Mb003' label-name='Mb002'></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		login,
		getConfig,
		getCompanyAccountSet
	} from '@/api/common.js'
	import md5Libs from "uview-ui/libs/function/md5";
	import resources from '@/libs/resources'
	import config from "@/utils/config";
	export default {
		data() {
			return {
				companyColumns: [],
				companyShow: false,
				imgUrl: '',
				loading: false,
				formData: {
					account: "",
					password: "",
					code: "",
					origin: 'password',
					canLoginCompanyLabel: '',
					canLoginCompanyValue: '',
				},
				needCode: false,
				codeLength: 4,
				isCode: false,
				rules: {
					account: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur',
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur',
					}, ],

				},
				sysConfigInfo: {},
				appIcon: 'zhizi.png',
				copyright: 'Copyright © 2022 广东启邦软件技术有限公司',
				optionList: [],
				option1: false,
				option2: false,
				optionName: null,
				optionIp: null,
			}
		},

		onReady() {
			this.$refs.dataForm.setRules(this.rules);
		},
		onShow() {
			this.optionList = config
			this.sysConfigInfo = uni.getStorageSync('sysConfigInfo')
			if (!this.sysConfigInfo) return this.option1 = true
			this.init()
		},
		onLoad() {},
		methods: {
			init() {
				this.sysConfigInfo = uni.getStorageSync('sysConfigInfo')
				this.appIcon = `/static/${this.sysConfigInfo.appIcon}`
				this.getCompanyAccountSetFn()
				this.formData.password = '';
			},
			tagClick(data) {
				uni.setStorage({
					key: 'sysConfigInfo',
					data: data
				})
				this.$refs.uToast.show({
					title: `您已选择:${ data.companyName}`,
					type: 'success',
					position: 'top',
					duration: 1000,
					callback: () => {
						this.option1 = false;
						this.init()
					}
				})
			},
			onFocus(e) {
				this.getConfig(e)
			},
			onBlur(e) {
				this.getConfig(e)
			},
			selectConfirm(e) {
				this.formData.canLoginCompanyLabel = e[0].label
				this.formData.canLoginCompanyValue = e[0].value
			},
			companyClick() {
				this.companyShow = true
			},
			getCompanyAccountSetFn() {
				getCompanyAccountSet().then(res => {
					if (res.code == 200) {
						this.companyColumns = res.data
						if (this.companyColumns.length > 0) {
							this.formData.canLoginCompanyLabel = this.companyColumns[0].Mb002
							this.formData.canLoginCompanyValue = this.companyColumns[0].Mb003
						}
					}
				})
			},
			getConfig(val) {
				if (!val) return
				getConfig(this.formData.account).then(res => {
					this.needCode = !!res.data.enableVerificationCode
					if (this.needCode) {
						this.codeLength = res.data.verificationCodeNumber || 4
						this.changeCode()
					}
				})
			},
			changeCode() {
				let timestamp = Math.random()
				this.timestamp = timestamp
				this.imgUrl = `/api/oauth/ImageCode/${this.codeLength || 4}/${timestamp}`
			},
			login() {
				if (!this.isCode) {
					this.$refs.uToast.show({
						title: '请同意服务协议与隐私政策',
						type: 'error',
					})
					this.$refs.uModal.clearLoading();
					return
				}
				this.$refs.dataForm.validate(valid => {
					if (valid) {
						this.loading = true
						let query = {
							account: this.formData.account,
							password: md5Libs.md5(this.formData.password),
							timestamp: this.timestamp,
							code: this.formData.code,
							origin: this.formData.origin
						}
						// #ifdef  APP-PLUS
						// const clientId = plus.push.getClientInfo().clientid;
						query.clientId = ''
						// query.canLoginCompany = 'YYD_ERP'
						// #endif
						query.canLoginCompany = this.formData.canLoginCompanyValue
						login(query).then(res => {
							console.log('res', res)
							this.loading = false
							let token = res.data.token
							this.$store.commit('user/SET_TOKEN', token)
							uni.setStorageSync('token', token)
							uni.switchTab({
								url: '/pages/index/workFlow'
							});
						}).catch((err) => {
							console.log('err', err)
							this.loading = false
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {}

	.logo-v {
		.login-bg {
			image {
				width: 100%;
				height: 100%;
			}
		}

		.logo-hd {
			width: 100%;
			position: absolute;
			top: 200rpx;

			.logoImg {
				width: 160rpx;
				height: 160rpx;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20%;
				}
			}

			.introduce {
				justify-content: center;
				align-items: center;

				.text-one {
					height: 70rpx;
					font-weight: 700;
				}

				.text-two {
					color: #999999;
				}
			}
		}

		.loginSwitch {
			margin-top: 40rpx;
			justify-content: center;
			align-items: center;

			.tabs {
				color: #999999;
				position: relative;

				&::after {
					content: "";
					width: 64rpx;
					height: 4rpx;
					background-color: #356efe;
					margin-top: 15rpx;
					position: absolute;
					left: 0;
					bottom: -15rpx;
					display: block;
					border-radius: 50rpx;
				}

				// &.active1 {
				// 	&::after {
				// 		left: 0;
				// 	}
				// }

				&.active2 {
					&::after {
						left: 70%;
					}
				}

				.tab {
					width: 50%;
					height: 80upx;
					text-align: center;
					color: #AEAFB5;
					font-size: 32upx;

					&.active {
						color: #3281ff;
					}
				}

			}

			.loginInputBox {
				width: 100%;
				margin-top: 80rpx;
				padding: 0 64rpx;

				.code-box {
					width: 100%;
				}

				.loginBtnBox {}
			}
		}
	}
</style>